<template>
  <div class="template_manager">
    <div>
      <a-row>
        <a-col :span="10">
          <a-form-item
            label="模板类别："
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-select style="width: 160px;"
                      placeholder="请选择"
                      @change="handleSelectChange"
                      v-model="template_category.form.category_id"
            >
              <a-select-option :value="value.id" v-for="(value, index) in tem_categorys" :key="value.id">
                {{value.name}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="模板名称："
          >
            <a-input placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <!-- <router-link> -->
          <a-button type="primary" icon="sync" style="margin-top: 3px;" @click="refresh_data">刷新</a-button>
          <!-- </router-link> -->
        </a-col>
      </a-row>
    </div>
    <div style="margin-top: 20px;">
      <a-button type="primary" @click="showModal" icon="plus"> 新建 </a-button>
      <a-modal v-model="visible" title="新建模板" @ok="handleSubmit" width="960px">
        <div>
          <div>
            <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
              <a-row>
                <a-form-item label="模板类别">
                  <a-col :span="18">
                    <a-select
                      v-decorator="[ 'category',
              { rules: [{ required: true, message: 'Please select your gender!' }] }, ]"
                      placeholder=""
                      @change="handleSelectChange" >
                      <a-select-option :value="value.id" v-for="(value, index) in tem_categorys" :key="value.id">
                        {{value.name}}
                      </a-select-option>
                    </a-select>
                  </a-col>
                  <a-col :span="6"><a-button type="link">添加类别</a-button></a-col>
                </a-form-item>
              </a-row>
              <a-form-item label="模板名称">
                <a-input
                  v-decorator="['name', { rules: [{ required: true, message: 'Please input your note!' }] }]"
                />
              </a-form-item>
              <a-form-item label="模板内容">
                <div>
                  <editor v-model="cmd" @init="editorInit" lang="html" theme="chrome" width="500" height="300">
                  </editor>
                </div>
              </a-form-item>

              <a-form-item label="备注信息">
                <a-textarea v-decorator="['desc', { rules: [{ required: false, message: 'Please input your note!' }] }]"
                            placeholder="Basic usage" :rows="4"/>
              </a-form-item>


            </a-form>

          </div>

        </div>


      </a-modal>

    </div>

    <div style="margin-top: 10px;">
      <a-table :columns="columns" :data-source="data" :rowKey="record => record.id">

      <span slot="action" slot-scope="record">
        <a href="javascript:;">编辑</a> |
        <a href="javascript:;">删除</a>

      </span>
      </a-table>
    </div>
  </div>
</template>

<script>
  const formItemLayout = {
    labelCol: {span: 6},
    wrapperCol: {span: 14},
  };

  const columns = [
    {
      title: '模板名称',
      dataIndex: 'name',
      key: 'name',

    },
    {
      title: '模板类型',
      dataIndex: 'category_name',
      key: 'category_name',

    },
    {
      title: '模板内容',
      dataIndex: 'cmd',
      key: 'cmd',
      width: 200,
    },
    {
      title: '描述信息',
      dataIndex: 'description',
      key: 'description',

    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      scopedSlots: {customRender: 'action'},
    },
  ];
  export default {
    name: "TemplateManage",
    data() {
      return {
        formItemLayout,
        visible: false,
        formLayout: 'horizontal',
        form: this.$form.createForm(this, {name: 'coordinated'}),
        tem_categorys: [],
        data: [],
        columns,
        cmd: '',  // 添加指令模板时的cmd指令
        template_category: {
          form: {
            category_id: 1,
            name: '',
            cmd: '',
            desc: '',
          }
        }
      }
    },
    components: {
      editor: require('vue2-ace-editor'),
    },
    created() {
      this.get_templates_list();
      this.get_templates_category_list();
    },

    methods: {
      editorInit: function () {
        require('brace/ext/language_tools') //language extension prerequsite...
        require('brace/mode/html')
        require('brace/mode/javascript')    //language
        require('brace/mode/less')
        require('brace/theme/chrome')
        require('brace/snippets/javascript') //snippet
      },
      handleSubmit(e) {  // handleSubmit必须声明并使用这个方法，名字不能改
        e.preventDefault();
        this.form.validateFields((err, values) => {
          let token = sessionStorage.token || localStorage.token;
          if (!err) {
            values.cmd = this.cmd;
            // 拿到验证成功之后的数据
            console.log('Received values of form: ', values);
            // 发送添加模板的请求
            this.$axios.post(`${this.$settings.host}/mtask/templates`, values,{
              headers:{
                Authorization: "jwt " + token
              }
            })
              .then(response => {
                console.log(response);
                this.visible = false;
                this.get_templates_list();
              })

          }

        });
        // this.visible = false;
      },
      showModal() {
        this.visible = true;
      },
      // handleOk(e) {
      //
      //   this.visible = false;
      // },

      handleSelectChange(value) {
        // 切换模板分类
        this.get_templates_list(value)
      },
      refresh_data() {
        this.get_templates_list();
      },
      get_templates_list(category = null) {
        let token = sessionStorage.token || localStorage.token;
        let params = {}
        if(category !== null){
          params.category = category
        }
        this.$axios.get(`${this.$settings.host}/mtask/templates`,{
          params:params,
          headers:{
            Authorization: "jwt " + token
          }
        }).then(response => {
            this.data = response.data;
        })
      },
      get_templates_category_list() {
        let token = sessionStorage.token || localStorage.token;
        this.$axios.get(`${this.$settings.host}/mtask/templates/categorys`,{
          headers:{
            Authorization: "jwt " + token
          }
        })
          .then(response => {
            this.tem_categorys = response.data;
          })
      }
    }

  }
</script>

<style scoped>

</style>
